<template>
  <div :loading="loading" element-loading-text="加载中。。。">
    <el-card style="overflow:visible;">
      <el-form :model="form" size="mini" :rules="rules" label-position="top" ref="form">
        <el-row :gutter="10">
          <el-col :lg="4" :md="6">
            <el-form-item label='公司' prop='company'>
              <el-select v-model="form.company" placeholder="请选择公司" @change="queryTeam">
                <el-option key="index" label="全部" value="">
                </el-option>
                <el-option v-for="item in companyList" :key="item.TEAMID" :label="(item.TEAMID+'-'+item.TEAMNAME)"
                  :value="item.TEAMID">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :md="6" :lg="4">
            <el-form-item label="班组" prop="team">
              <el-select v-model="form.team" filterable placeholder="请选择班组" @change="agentQuery">
                <el-option key="index" label="全部" value="">
                </el-option>
                <el-option v-for="item in teamList" :key="item.TEAMID" :label="(item.TEAMID+'-'+item.TEAMNAME)"
                  :value="item.TEAMID"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :md="6" :lg="4">
            <el-form-item label="坐席" prop="agentid">
              <el-select v-model="form.agentid" multiple placeholder="请选择坐席">
                <el-option v-for="item in agentList" :key="item.AGENTID" :label="(item.AGENTID+'-'+item.AGENTNAME)"
                  :value="item.AGENTID"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :md="6" :lg="4">
            <el-form-item label='开始日期' class='typeInfo-el-form-item' prop='startdate'>
              <el-date-picker v-model="form.startdate" value-format="yyyyMMdd" @change="dateChange" type="date" style="width:100%;"
                placeholder="选择开始日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :md="6" :lg="4">
            <el-form-item label='结束日期' class='typeInfo-el-form-item' prop='enddate'>
              <el-date-picker v-model="form.enddate" value-format="yyyyMMdd" @change="dateChange" type="date" style="width:100%;"
                placeholder="选择结束日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :lg="2" :md="3" class="searchBtnMarginTop">
            <el-button type="primary" icon="el-icon-search" :loading="loading" @click="query(1)" size="mini">查询
            </el-button>
          </el-col>
          <el-col :md="3" :lg="2" class="searchBtnMarginTop">
            <el-button type="warning" size="mini" icon="el-icon-refresh" @click="clearForm('form')">重置</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-card style="margin-top:10px;">
      <el-row :gutter="10">
        <el-col :lg="2" :md="3" v-if="btnPermission('Button_User_Download')">
          <el-button type="primary" size="mini" icon="el-icon-download" :load="this.download"
            :disabled="tableData.length==0" @click="getExcel">导出</el-button>
        </el-col>
      </el-row>
      <el-table :data="tableData" ref="tableData" border class="tableMarginTop" header-row-class-name="tableHeaderClass"
        highlight-current-row @selection-change="handleCurrentChange" style="min-height:390px;">
        <el-table-column type="selection" width="40px"></el-table-column>
        <el-table-column prop="AGENTID" label="坐席工号"></el-table-column>
        <el-table-column prop="AGENTNAME" label="坐席姓名"></el-table-column>
        <el-table-column prop="N_NOTREADY" label="示忙次数"></el-table-column>
        <el-table-column prop="T_NOTREADY" label="示忙时长"></el-table-column>
        <el-table-column prop="N_TOTALNUM_ACW" label="整理次数"></el-table-column>
        <el-table-column prop="TOTAL_ACW_TIME" label="整理时长"></el-table-column>
      </el-table>
      <div style="text-align:right;margin-top:20px;">
        <el-pagination @size-change="handleSizeChange" :page-sizes="[10,25,50,100]" :page-size="pageSize"
          @current-change="changePage" :current-page="currentPage" layout="total,sizes, prev, pager, next, jumper"
          background :total="totalRcrdNum"></el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
  import toolBox from "@/common/utils/toolBox";
  import query from "@/message/siteManagement/agentRest/query";
  import request1 from "@/common/utils/requestTest";
  import request from "@/common/utils/requestYg";
  import getGlobalParams from "@/common/utils/getGlobalParams";
  import comQuery from "@/message/siteManagement/agentRest/comQuery";
  import agentQuery from "@/message/siteManagement/agentRest/agentQuery";
  import getExcel from "@/message/siteManagement/agentRest/getExcel";
  export default {
    data() {
      return {
        loading: false,
        download: false,
        tableData: [],
        currentPage: 1,
        currentRow: [],
        totalRcrdNum: 0,
        companyList: [],
        teamList: [],
        agentList: [],
        list1: [],
        filename: "",
        fileUrl: getGlobalParams.get("agentDownloadAddress"),
        pageSize: getGlobalParams.get("PageSize"),
        form: {
          company: "",
          team: "",
          agentid: [],
          startdate: "",
          enddate: ""
        },
        rules: {
          startdate: [{
            required: true,
            message: "开始日期不能为空",
            trigger: "blur"
          }],
          enddate: [{
            required: true,
            message: "结束日期不能为空",
            trigger: "blur"
          }],
        }
      }
    },
    mounted() {
      this.form.startdate = toolBox.getNowTime(0);
      this.form.enddate = toolBox.getNowTime(0);
      this.comQuery();
      // this.query();
    },
    methods: {
      comQuery() {
        //模板配置查询
        let resBody = new comQuery();
        resBody.data.TEAMTYPE = "1";
        request1(resBody)
          .then(response => {
            if (response.SYS_HEAD.ReturnCode === "000000") {
              this.companyList = response.RSP_BODY.RspStruct || [];
            } else {
              this.$message({
                type: "error",
                message: response.SYS_HEAD.ReturnMessage
              });
              this.companyList = [];
            }
            this.loading = false;
          })
          .catch(error => {
            this.loading = false;
          })

      },
      //查询坐席
      agentQuery(val) {
        this.agentList = [];
        this.form.agentid = [];
        let resBody = new agentQuery();
        resBody.data.agentdep = this.form.company;
        resBody.data.agentteam = val;
        request(resBody)
          .then(response => {
            if (response.SYS_HEAD.ReturnCode === "000000") {
              this.agentList = response.RSP_BODY.AgentList || [];
            } else {
              this.$message({
                type: "error",
                message: response.SYS_HEAD.ReturnMessage
              });
              this.agentList = [];
            }
            this.loading = false;
          })
          .catch(error => {
            this.loading = false;
          })

      },
      //数据模板ID初始化下拉框
      queryTeam(val) {
        if (val === "") {
          this.teamList = [];
          this.agentList = [];
          this.form.agentid = [];
          this.form.team = "";
        } else {
          this.teamList = [];
          this.agentList = [];
          this.form.agentid = [];
          this.form.team = "";
          let resBody = new comQuery();
          resBody.data.TEAMID = '';
          resBody.data.TEAMNAME = '';
          resBody.data.TEAMLEVEL = '';
          resBody.data.TEAMTYPE = '0';
          resBody.data.HTEAMID = val;
          resBody.data.pageflag = 4;
          resBody.data.pagerownum = 999999;
          resBody.data.currpage = this.currentPage;
          request1(resBody)
            .then(response => {
              if (response.SYS_HEAD.ReturnCode === "000000") {
                this.teamList = response.RSP_BODY.RspStruct || [];
                this.agentQuery("");
              } else {
                this.$message({
                  type: "error",
                  message: response.SYS_HEAD.ReturnMessage
                });
                this.teamList = [];
              }
            })
            .catch(error => {})
        }

      },
      query(num) {
        this.$refs["form"].validate(valid => {
          if (valid) {
            this.loading = true;
            this.currentPage = num;
            let resBody = new query();
            let list = "";
            if (this.form.agentid != null) {
              for (let i = 0; i < this.form.agentid.length; i++) {
                if (i == 0) {
                  list = "'" + this.form.agentid[i] + "'";
                } else {
                  list = list + "," + "'" + this.form.agentid[i] + "'";
                }
              }
              // console.log("=============", list);
            }
            resBody.data.company = this.form.company;
            resBody.data.group = this.form.team,
              resBody.data.agentid = list;
            resBody.data.begindate = this.form.startdate;
            resBody.data.enddate = this.form.enddate;
            resBody.data.pageflag = 4;
            resBody.data.currpage = this.currentPage;
            resBody.data.pagerownum = this.pageSize;

            request(resBody)
              .then(response => {
                if (response.SYS_HEAD.ReturnCode === "000000") {
                  this.tableData = response.RSP_BODY.AgentList || [];
                  this.totalRcrdNum = response.RSP_BODY.TotalNum;
                  // console.log("response", response);
                } else {
                  this.$message({
                    type: "error",
                    message: response.SYS_HEAD.ReturnMessage
                  });
                  this.tableData = [];
                  this.totalRcrdNum = 0;
                }
                this.loading = false;
              })
              .catch(error => {
                this.loading = false;
              })
          } else {
            this.$message({
              type: "warning",
              message: "请输入合法的数据！"
            });
            return false;
          }
        });
      },
      downFile() {
        this.download = false;
        if (this.filename.length == 0) {
          this.$message({
            type: "error",
            message: `文件不存在，无法下载`
          });

        } else {
          window.location.href = this.fileUrl + this.filename;
        }
      },
      getExcel() {
        //debugger
        this.$refs["form"].validate(valid => {
          if (valid) {
            this.$message({
              type: "success",
              message: `正在下载。。。。。。`
            });
            this.download = true;
            let resBody = new getExcel();
            let list = "";
            if (this.form.agentid != null) {
              for (let i = 0; i < this.form.agentid.length; i++) {
                if (i == 0) {
                  list = "'" + this.form.agentid[i] + "'";
                } else {
                  list = list + "," + "'" + this.form.agentid[i] + "'";
                }
              }
              // console.log("=============", list);
            }
            resBody.data.company = this.form.company;
            resBody.data.group = this.form.team,
              resBody.data.agentid = list;
            resBody.data.begindate = this.form.startdate;
            resBody.data.enddate = this.form.enddate;
            resBody.data.code = "Y017";

            request(resBody)
              .then(response => {
                if (response.SYS_HEAD.ReturnCode === "000000") {
                  this.filename = response.RSP_BODY.filepath;
                  console.log("this.filename", this.filename);
                  this.downFile();
                } else {
                  this.$message({
                    type: "error",
                    message: response.SYS_HEAD.ReturnMessage
                  });
                }
                this.loading = false;
              })
              .catch(error => {
                this.loading = false;
              })
          } else {
            this.$message({
              type: "warning",
              message: "请输入合法的数据！"
            });
            return false;
          }
        });
      },
      clearForm(item) {
        this.$refs["" + item].resetFields();
        this.form.startdate = toolBox.getNowTime(0);
        this.form.enddate = toolBox.getNowTime(0);
      },
      changePage(val) {
        // this.currentPage = val;
        this.query(val);
      },
      handleSizeChange(val) {
        this.pageSize = val;
        this.query(1);
      },
      handleCurrentChange(val) {
        this.currentRow = val;
      },
      dateChange() {
        let date1 = new Date(toolBox.timeFormat2Date(this.form.startdate)) / 1000 / 3600 / 24;
        let date2 = new Date(toolBox.timeFormat2Date(this.form.enddate)) / 1000 / 3600 / 24;
        let sumDate = date2 - date1;
        let currentdate = new Date(toolBox.timeFormat2Date(toolBox.getNowTime(0))) / 1000 / 3600 / 24;
        let day1 = date2 - currentdate;

        if (sumDate < 0) {
          this.$message({
            type: "warning",
            message: "开始日期不能大于结束日期"
          })
          this.form.startdate = this.toolBox.getNowTime(-day1 + 30);
        }
        if (sumDate > 30) {
          this.$message({
            type: "warning",
            message: "开始日期和结束日期的跨度不能大于一个月"
          })
          this.form.startdate = this.toolBox.getNowTime(-day1 + 30);
        }
      }
    }
  }

</script>
